<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id='app'>
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
        <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <el-table-column prop="bid" header-align="center" align="center" label="借款id">
      </el-table-column>
      <el-table-column prop="uid" header-align="center" align="center" label="借款uid">
      </el-table-column>
      <el-table-column prop="createDate" header-align="center" align="center" label="创建时间">
      </el-table-column>
      <el-table-column prop="state" header-align="center" align="center" label="状态">
      </el-table-column>
      <el-table-column prop="money" header-align="center" align="center" label="借款金额">
      </el-table-column>
      <el-table-column prop="type" header-align="center" align="center" label="分期类型">
      </el-table-column>
      <el-table-column prop="aaa" header-align="center" align="center" label="每期还款金额">
      </el-table-column>
      <el-table-column prop="bbb" header-align="center" align="center" label="综合利率">
      </el-table-column>
      <el-table-column prop="ccc" header-align="center" align="center" label="综合手续费">
      </el-table-column>
      <el-table-column prop="ddd" header-align="center" align="center" label="总共还款金额">
      </el-table-column>
      <el-table-column prop="refunded" header-align="center" align="center" label="已还金额">
      </el-table-column>
      <el-table-column prop="rate" header-align="center" align="center" label="利率">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addrefund(scope.row)">还款</el-button>
          <el-button type="text" size="small" @click="updrefund(scope.row.bid)">抢单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      {{refund}}<br>
      被借款人：<el-input disabled v-model="borrow.buid" placeholder="请输入内容"></el-input><br>
      借款总额：<el-input disabled v-model="borrow.money" placeholder="请输入内容"></el-input><br>
      综合手续费：<el-input disabled v-model="borrow.ccc" placeholder="请输入内容"></el-input><br>
      总还款金额：<el-input disabled v-model="borrow.ddd" placeholder="请输入内容"></el-input><br>
      周期（默认一个月）：<el-input v-model="refund.type" placeholder="请输入内容"></el-input><br>
      应还金额：<el-input disabled v-model="refund.money" placeholder="请输入内容"></el-input><br>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRefund">确 定</el-button>
      </span>
    </el-dialog>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          borrow: {},
          refund: {
            type: 1,
            uid: '',
            bid: '',
            money: '',
            buid: ''
          },
          dialogVisible: false,
          baseUrl: 'http://localhost:8888/api',
          token: null,
          dataForm: {
            key: ''
          },
          dataList: [],
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0,
          dataListLoading: false,
          dataListSelections: [],
          addOrUpdateVisible: false
        }
      },
      watch: {
        'refund.type'(val) {
          this.refund.money = this.borrow.aaa * val
        }
      },
      created() {
        this.token = localStorage.getItem("token")
        if (this.token == null) {
          alert("无权访问")
          location = './t3_login.html'
        }
        this.getDataList();
      },
      //方法集合
      methods: {
        updrefund(bid) {
          axios.post(`${this.baseUrl}/borrow/borrow/update`, { bid: bid, state: '可抢单' }, { headers: { token: this.token } }).then(({ data }) => {
            if (data.code == 0) {
              alert("抢单成功")
              this.getDataList();
            }
          })
        },
        addRefund() {
          axios.post(`${this.baseUrl}/borrow/refund/save`, this.refund, { headers: { token: this.token } }).then(({ data }) => {
            if (data.code == 0) {
              alert("还款成功")
              this.getDataList();
              this.dialogVisible = false
            }
          })
        },
        addrefund(data) {
          this.borrow = data
          this.refund.bid = data.bid
          this.refund.uid = data.uid
          this.refund.buid = data.buid
          this.refund.money = data.aaa
          this.dialogVisible = true
        },
        // 获取数据列表
        getDataList() {
          this.dataListLoading = true
          axios({
            url: `${this.baseUrl}/borrow/borrow/list`,
            method: 'get',
            params: {
              'page': this.pageIndex,
              'limit': this.pageSize,
              'key': this.dataForm.key
            },
            headers: {
              token: this.token
            }
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataList = data.page.list
              this.totalPage = data.page.totalCount
            } else {
              this.dataList = []
              this.totalPage = 0
            }
            this.dataListLoading = false
          })
        },
        // 每页数
        sizeChangeHandle(val) {
          this.pageSize = val
          this.pageIndex = 1
          this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
          this.pageIndex = val
          this.getDataList()
        },
        // 多选
        selectionChangeHandle(val) {
          this.dataListSelections = val
        },
      },
    })
  </script>
</body>

</html>